<template>
    <div class="Bank">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Bank
            </div>
        </div>
        <div v-html="list.formDesc" class="bankDesc"></div>
        <van-form @submit="onSubmit" class="form">

            <van-field :rules="[{ required: true, message: 'This option cannot be empty' }]" readonly clickable
                v-model="bankCode" name="Bank Name" :value="value" label="Bank Name"
                placeholder="The input information is illegal" @click="showPicker = true" />
            <van-popup v-model="showPicker" position="bottom">
                <van-picker confirm-button-text="Confirm" cancel-button-text="Cancel" show-toolbar :columns="selectlist"
                    @confirm="doConfirm" @cancel="showPicker = false" />
            </van-popup>

            <!-- 银行卡号 -->
            <van-field :rules="[{ required: true, message: 'This option cannot be empty' }]"
                v-model="form.model.submitData.userBank.bankCard" name="Bank Number" label="Bank Number"
                placeholder="Bank Number" />
            <!-- IFSC -->
            <van-field
                :rules="[{ parrent: /^[^0-9]{4}[0][^0-9]{6}$/, message: 'IFSC total of 11 digit, spaces are not allowed, the fifth digit is the number 0' }, { required: true, message: 'This option cannot be empty' }]"
                v-model="form.model.submitData.userBank.ifscCode" name="IFSC Code" label="IFSC Code"
                placeholder="IFSC Code" />
            <!-- 按钮 -->
            <van-button class="BankBtn" type="submit">Submit</van-button>
        </van-form>
    </div>
</template>
<script>
import { getdefaultform, uploadbaseform } from '../../api/index.js'
import { jiami, jiemi } from '../../utils/aeskey.js'
import { Toast } from "vant";
export default {
    name: 'Bank',
    data() {
        return {
            bankCode: '',
            value: '',
            showPicker: false,
            cascader: '',
            selectlist: [],
            list: [],
            form: {
                model: {
                    formId: '',
                    submitData: {
                        userBank: {
                            bankCode: '',
                            bankCard: '',
                            ifscCode: ''
                        }
                    }
                }
            }
        }
    },
    methods: {
        //提交
        async onSubmit() {
            console.log(this.form)
            const res = await uploadbaseform(jiami(this.form))
            console.log(jiemi(res.data))
            this.$store.dispatch('weiwancehngform')
            location.reload();
            Toast('Submitted successfully')
            this.$store.dispatch('weiwancehngform')
        },
        //获取指定表单
        async getForm() {
            const r = {
                model: {
                    formId: '',
                    nodeType: ''
                }
            }
            r.model.formId = this.$store.state.formData[0].formId
            this.form.model.formId = this.$store.state.formData[0].formId
            const res = await getdefaultform(jiami(r))
            console.log(jiemi(res.data))
            this.list = jiemi(res.data).model.forms[0]
            this.selectlist = jiemi(res.data).model.forms[0].content[0].options.map(item => item.name)
            console.log('list', this.list)
        },
        //当选择完成时触发
        doConfirm(value, index) {
            console.log('value,index', value, index)
            this.showPicker = false
            this.bankCode = value
            //获取选中的索引
            this.form.model.submitData.userBank.bankCode = this.list.content[0].options.find(item => item.name === value).id
        }
    },
    created() {
        console.log('银行表单id', this.$store.state.formData[0].formId)
        //获取银行表单数据
        this.getForm()
        this.$store.dispatch('weiwancehngform')
    }
}
</script>
<style lang="less" scoped>
@a: 3.75vw;

.Bank {
    width: 100vw;
    height: (667/@a);
    background-color: #f5f5f5;
    padding-top: (67/@a);
    box-sizing: border-box;

    .form {

        .BankBtn {
            width: (232/@a);
            height: (44/@a);
            background: linear-gradient(90deg, #8042FF 0%, #BC37FF 100%);
            border-radius: (10/@a);
            margin-top: (20/@a);
            margin-left: (70/@a);
        }

        .title {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 500;
            font-size: (16/@a);
            color: #101010;
        }
    }

    .bankDesc {
        margin-left: (30/@a);
        margin-right: (30/@a);
    }


    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (160/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }

}
</style>